
<template>
  <div :class="{['menus-card-bg']: showBg}">
    <div class="menus">
      <div 
        class="menus-item" 
        :class="{active: item.active}" 
        v-for="item in menus" 
        v-bind:key="item.id"
        @touchstart.stop="() => $router.push(item.path)"
      >
        <div class="icon"><span class="material-symbols-outlined"> {{ item.icon }} </span></div>
        <div class="title">
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {defineProps, toRefs} from 'vue'

const props = defineProps(['showBg', 'menus'])
const {showBg, menus} = toRefs(props)


</script>

<style scoped lang="scss">
.menus-card{
  &-bg{
    width: dpi(70rem);
    margin: 0 auto;
    // margin-top: dpi(30rem);
    background-color: #ffffff;
    box-shadow: 0rem dpi(1rem) dpi(3rem) 0rem rgba(5, 32, 77, 0.1);
    border-radius: dpi(1rem);
  }
}

.menus{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: dpi(4rem);
  .menus-item{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: dpi(19rem);
    &.active{
      .icon{
        background-color: #0571b0;
        box-shadow: 0rem 1rem 2rem 0rem rgba(5, 113, 176, 0.3);
        color: #fff;
      }
    }
    .icon{
      display: flex;
      align-items: center;
      justify-content: center;
      width: dpi(8rem);
      height: dpi(8rem);
      background-color: #e6f1f7;
      border-radius: dpi(2rem);
      font-family: MaterialSymbolsOutlined-Light;
      color: #0571b0;
      > span{
        font-size: dpi(5rem);
      }
    }
    .title{
      margin-top: dpi(3rem);
      font-family: PingFangSC-Medium;
      font-size: dpi(2rem);
      line-height: dpi(3rem);
      color: #05204d;
    }
  }
}
</style>